// scss-lint:disable SelectorDepth, NestingDepth, ImportantRule

@import "constants";

.sci-dropdown {
  [data-toggle="dropdown"] {
    &:focus {
      box-shadow: none;
    }

    .caret {
      margin: 8px 0 8px 8px;
    }
  }

  &.open {
    [data-toggle="dropdown"] {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      border-color: $brand-focus;

      .caret {
        transform: rotateX(180deg);
      }
    }

    .dropdown-menu {
      @include font-button;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      box-shadow: $flyout-shadow;
      margin-top: -1px;
      width: 100%;

      li:hover {
        background: $color-concrete;
      }
    }
  }
}

.dropdown-menu {
  .form-dropdown-item {
    button {
      border-radius: 0;
      color: $color-black !important;
      padding-left: .9em;
      text-align: left;
      width: 100%;

      &:hover {
        background-color: $color-dd-hover !important;
      }
    }
  }
}
